<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/>
    <script src="../jquery/jquery-3.3.1.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>
        .wrapper {
        .make-row();
        }
        .content-main {
        .make-lg-column(8);
        }
        .content-secondary {
        .make-lg-column(3);
        .make-lg-column-offset(1);
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 col-lg-offset-4" style="background-color: red">1</div>
        <div class="col-lg-6 " style="background-color: blue">1</div>
    </div>
    <div class="row">
        <div class="col-lg-4 " style="background-color: aqua">11</div>
        <div class="col-lg-4 " style="background-color: sandybrown">11</div>
        <div class="col-lg-4 " style="background-color: rosybrown">11</div>
    </div>
    <div class="row ">
        <div class="col-xs-9">.col-xs-9</div>
        <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
        <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
    </div>
    <div class="row">
        <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
        <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
        <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">
        </div>
        <div class="col-xs-6 col-sm-4">
        </div>
        <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
        </div>
    </div>
    <div class="row">
        <div class="col-md-9 col-md-push-2" style="background-color: yellow;">.col-md-9 .col-md-push-3</div>
        <div class="col-md-3 col-md-pull-9" style="background-color: blue;">.col-md-3 .col-md-pull-9</div>
    </div>


    <p >
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
    </p>
    <div class="text-muted">.text-muted 效果</div>
    <div class="text-primary">.text-primary效果</div>
    <div class="text-success">.text-success效果</div>
    <div class="text-info">.text-info效果</div>
    <div class="text-warning">.text-warning效果</div>
    <div class="text-danger">.text-danger效果</div>
    <abbr title="Phone">P:</abbr> (123) 456-7890
    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </blockquote>
    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
    <blockquote class="blockquote-reverse">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </blockquote>
    <ul class="list-inline">
        <li>Phasellus iaculis neque</li>
        <li>Purus sodales ultricies</li>
        <li>Vestibulum laoreet porttitor sem</li>
        <li>Ac tristique libero volutpat at</li>
    </ul>

    <dl>
        <dt>Description lists</dt>
        <dd>A description list is perfect for defining terms.</dd>
        <dt>Euismod</dt>
        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
    </dl>
    <dl class="dl-horizontal">
        <dt>Vestibulum</dt>
        <dd>Euismod</dd>
    </dl>

    <button type="button" class="btn btn-lg btn-primary disabled ">Primary button</button>
    <span class="bg-primary">ligula porta felis euismod semper</span>
    <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <span class="caret"></span>
    <div class="pull-right">dadasda.</div>
    <div class="center-block hidden ">CCC</div>
    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
    <h1 class="text-hide">Custom heading</h1>
</div>
</body>
</html>